<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //push  
        // pop 
        // unshift
        // shift
        // reverse 
        // sort 
        // splice 
         //  原数组发生了变化 

         // 接下来的方法  不影响原数组  

         // concat()
        /* 
            数组.concat(数组1,数组2,...,数组n)
            作用: 把数组1 数组2 数组n 拼接到 数组的后边  
            返回值: 拼接好的数组  一个新的数组 
            原数组不变 

        
        */

        // var xiaobao = ['阿珂','双儿','建宁公主','苏荃','沐剑屏','曾柔','方怡'];
        // var heros = ['李白','孙悟空','上官婉儿','花木兰','司马懿','赵云'];
        // var res = xiaobao.concat(heros);
        // console.log('小宝',xiaobao);
        // console.log('英雄',heros);
        // console.log('拼接以后的',res);
        
        //concat 中如果是数组 会把一个个拆开然后拼接到xiaobao数组的后面
        // var data = xiaobao.concat([1,2,3,4],5,[6,7,8],10,[11]);
        // console.log('拼接以后的',data);
        // ['阿珂', '双儿', '建宁公主', '苏荃', '沐剑屏', '曾柔', '方怡', 1, 2, 3, 4, 5, 6, 7, 8, 10, 11]
        // 把数组中一个个取出来拼接到小宝的后面

         // [5,10)
         // slice() 
            /* 
                唯一一个支持索引是负数的 其它的不支持  
                作用: 截取数组的部分内容 
                语法: 数组.slice(开始的索引,结束的索引) [开始的索引,结束的索引)
                返回值: 一个新的数组  里边是截取的元素

                splice() 也是截取数据的内容
                splice 改变原数组 
                slice 不改变原数组 

                splice(开始的索引,多少个)
                slice(开始的索引,结束的索引)
            
            */

            // var xiaobao = ['阿珂','双儿','建宁公主','苏荃','沐剑屏','曾柔','方怡'];
            //                0     1      2         3     4       5      6
            //               -7    -6     -5         -4    -3      -2     -1 
            // 需求拿到 建宁公主 苏荃
            // console.log('原始数组',xiaobao);
            // var res = xiaobao.slice(2,4); // [2,4)  =>2 3
            // console.log('截取后的',res);
            // console.log('截取后的原始数组',xiaobao);

            // 始终是从左往后的顺序  
            //  console.log('原始数组',xiaobao);
            // // var res = xiaobao.slice(-4,-6); // -4到-6从右往左 方向冲突 所以什么也没有
            // // var res = xiaobao.slice(-6,-4);// '双儿','建宁公主'
            // // var res = xiaobao.slice(0);// 有头无尾 下标一直到最后
            // // // 数组.slice(0); 复制数组的另外一个方法 
            // var res = xiaobao.slice(-1); // 从左往右的顺序 这个结果是方怡 
            // // 也就是最后一个元素
            // // var res = xiaobao.slice(-7); // 等同于 slice(0)
            // console.log('截取后的',res);
            // console.log('截取后的原始数组',xiaobao);

         // join()
         /* 
            作用:数组拼接成字符串 
            语法:数组.join('连接符')  连接符不写默认 逗号
            返回值: 拼接好的字符串  


         
         
         */ 

        // var xiaobao = ['阿珂','双儿','建宁公主','苏荃','沐剑屏','曾柔','方怡'];
        // console.log('原始数组',xiaobao);
        // // var res = xiaobao.join(); // 不写连接符 默认,
        // // console.log('操作以后原数组',xiaobao);
        // // console.log('拼接的结果',res,typeof res);
        // //阿珂,双儿,建宁公主,苏荃,沐剑屏,曾柔,方怡 string
        // var res = xiaobao.join('@');
        // console.log('操作以后原数组',xiaobao);
        // console.log('拼接的结果',res,typeof res);
        // //阿珂@双儿@建宁公主@苏荃@沐剑屏@曾柔@方怡 string
        
        
        
        // indexOf()
        /* 
            语法:数组.indexOf(数据); // 表示从0开始从左往右查找
            数组.indexOf(数据,开始的索引); // 从开始的索引往右查找 
            作用: 在数组中从左往右查找元素,主要找到这个元素第一次出现在数组中的位置(索引)
            返回值: 
                如果存在这个元素 那么返回这个元素第一次出现的位置
                 如果不存在这个元素 那么返回-1
        
        */
        var xiaobao = ['阿珂','双儿','建宁公主','双儿','苏荃','沐剑屏','阿珂','曾柔','方怡'];
        console.log('原始数组',xiaobao);
        // var res = xiaobao.indexOf('双儿');
        // var res = xiaobao.indexOf('双儿',4);
        var res = xiaobao.indexOf('爱的发大事发声');

        console.log('结果',res); // 返回下标1 
        console.log('操作后数组',xiaobao);
         // lastIndexOf()
        //  语法:数组.lastIndexOf(数据); // 表示从最右往左查找
        //     数组.lastIndexOf(数据,开始的索引); // 从开始的索引往左查找 
        //     作用: 在数组中从右往左查找元素,主要找到这个元素第一次出现在数组中的位置(索引)
        //     返回值: 
        //         如果存在这个元素 那么返回这个元素第一次出现的位置
        //          如果不存在这个元素 那么返回-1


        var xiaobao = ['阿珂','双儿','建宁公主','双儿','苏荃','沐剑屏','阿珂','曾柔','方怡'];
        console.log('原始数组',xiaobao);
        // var res = xiaobao.lastIndexOf('双儿');
        // var res = xiaobao.lastIndexOf('双儿',0);
        var res = xiaobao.lastIndexOf('啊打发打发');


        console.log('结果',res); // 返回下标1 
        console.log('操作后数组',xiaobao);
    </script>
</body>
</html>